<template>
	<div class="lunbo">
		<!-- 轮播区域 -->
		<div class="swiper Lunbo-swiper">
			<!-- 主体的滑动区 -->
			<ul class="swiper-wrapper">
				<li class="swiper-slide"  v-for="item in list" :key="item.id">
					<img :src="item.imgURL" >
				</li>
			</ul>
			<!--分页器。如果放置在swiper外面，需要自定义样式。-->
			<div class="swiper-pagination Lunbo_pagination"></div>
		</div>
	</div>
</template>

<script>
	// 引入vue周期函数
	import{onMounted} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper'
	// 3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'Lunbo',
		props:['propslunbo'],
		data(){
			return{
				list:[
					
				],	
			}
		},
		watch:{
			propslunbo(){
				this.list=this.propslunbo
			}
		},
		// 4.设置应用swiper的位置以及具体操作
			updated(){ 
				new Swiper( '.Lunbo-swiper' , {
					// 循环播放
					loop:true,
					//设置分页器效果
					pagination:{
						el:'.Lunbo_pagination'
					},
					//设置播放项：时间，不停止，手指经过不暂停自动
					autoplay:{
						delay:3000,
						stopOnLastSlide:false,
						disableOnInteraction:true
					}
				} )
			} 
		
	}
	
	
</script>

<style scoped>
	.lunbo{
		width: 100%;
		height: 5.6rem;
	}
	.lunbo img{
		width: 100%;
		height: 5.6rem;
	}
	/* 穿透 */
	.Lunbo_pagination :deep(.swiper-pagination-bullet-active){
		background-color: white;
	}	
	
</style>
